<template>
  <div
    class="leftPanel-section"
    :style="{ width: leftPnlWidth + 'px', height: leftPnlHeight }"
  >
    <menu class="leftPanel-menu" style="overflow:hidden">
      <li
        :class="
          active == index
            ? 'leftPanel-menu__li active jello-horizontal'
            : 'leftPanel-menu__li'
        "
        v-for="(item, index) in menuList"
        :key="index"
        @click="tabsClick(index, item.name)"
      >
        <button :class="item.class">{{ item.text }}</button>
      </li>
    </menu>
    <div class="leftPanel-content">
      <moulds
        :class="activeTabName == 'template' ? 'fade-in-bottom' : ''"
        v-if="activeTabName == 'template'"
        :tabHeight="tabHeight"
      ></moulds>
      <images
        :class="activeTabName == 'image' ? 'fade-in-bottom' : ''"
        v-if="activeTabName == 'image'"
        :tabHeight="tabHeight"
      ></images>
      <materials
        :class="activeTabName == 'material' ? 'fade-in-bottom' : ''"
        v-if="activeTabName == 'material'"
        :tabHeight="tabHeight"
      ></materials>
      <words
        :class="activeTabName == 'word' ? 'fade-in-bottom' : ''"
        v-if="activeTabName == 'word'"
        :tabHeight="leftPnlHeight"
      ></words>
      <backgrounds
        :class="activeTabName == 'background' ? 'fade-in-bottom' : ''"
        v-if="activeTabName == 'background'"
        :tabHeight="leftPnlHeight"
      ></backgrounds>
      <tools
        :class="activeTabName == 'tool' ? 'fade-in-bottom' : ''"
        v-if="activeTabName == 'tool'"
        :tabHeight="leftPnlHeight"
      ></tools>
      <uploads
        :class="activeTabName == 'upload' ? 'fade-in-bottom' : ''"
        v-if="activeTabName == 'upload'"
        :tabHeight="tabHeight"
      ></uploads>

      <div class="leftPanel-mainContent-toggle" @click="shousuo()">
        <i
          style="font-weight:800"
          :class="openClose ? 'el-icon-arrow-left' : 'el-icon-arrow-right'"
        ></i>
      </div>
    </div>
  </div>
</template>

<script>
import moulds from "@/design/leftTabs/moulds";
import images from "@/design/leftTabs/images";
import materials from "@/design/leftTabs/materials";
import words from "@/design/leftTabs/words";
import backgrounds from "@/design/leftTabs/backgrounds";
import tools from "@/design/leftTabs/tools";
import uploads from "@/design/leftTabs/uploads";

import { mapActions } from "vuex";

export default {
  name: "leftPanel",
  components: { moulds, images, materials, words, backgrounds, tools, uploads },
  data() {
    return {
      //template image material word background tool upload
      activeTabName: "template",
      active: -1,
      openClose: false,
      leftPnlHeight: "",
      leftPnlWidth: "",
      tabHeight: "",
      radio1: "我购买的",
      activeName: "first",
      menuList: [
        {
          text: "模板",
          name: "template",
          class: "leftPanel-menu__button template-section__button"
        },
        {
          text: "图片",
          name: "image",
          class: "leftPanel-menu__button image-section__button"
        },
        {
          text: "素材",
          name: "material",
          class: "leftPanel-menu__button material-section__button"
        },
        {
          text: "文字",
          name: "word",
          class: "leftPanel-menu__button text-section__button"
        },
        {
          text: "背景",
          name: "background",
          class: "leftPanel-menu__button background-section__button"
        },
        {
          text: "工具",
          name: "tool",
          class: "leftPanel-menu__button tools-section__button"
        },
        {
          text: "上传",
          name: "upload",
          class: "leftPanel-menu__button upload-section__button"
        }
      ]
    };
  },
  computed: {},
  watch: {
    openClose(val) {
      console.log(val, "vallllllllllll");
    }
  },
  created() {
    // if (localStorage.getItem("leftOpenClose") == null) {
    //   localStorage.setItem("leftOpenClose", false);
    // }
    // this.openClose = localStorage.getItem("leftOpenClose");
  },
  mounted() {
    window.addEventListener("resize", () => {
      this.resizeHeight();
    });
    this.resizeHeight();
    let leftctnt = document.getElementsByClassName("leftPanel-content")[0];
    this.openClose
      ? (leftctnt.style.left = 72 + "px")
      : (leftctnt.style.left = -232 + "px");
  },
  methods: {
    ...mapActions(["setLeftState"]),
    shousuo() {
      this.openClose = !this.openClose;
      let leftctnt = document.getElementsByClassName("leftPanel-content")[0];
      this.openClose
        ? (leftctnt.style.left = 72 + "px")
        : (leftctnt.style.left = -232 + "px");
      this.setLeftState(this.openClose);
      this.$emit("openClose", this.openClose);
    },
    resizeHeight() {
      const that = this;

      this.$nextTick(() => {
        that.leftPnlHeight = window.innerHeight - 56 + "px";
        that.tabHeight = window.innerHeight - 138 + "px";

        that.$forceUpdate();
      });
    },
    tabsClick(index, name) {
      this.active = index;
      let leftctnt = document.getElementsByClassName("leftPanel-content")[0];

      leftctnt.style.left = 72 + "px";
      this.activeTabName = name;

      //其实用一个参数就可以代替，leftstate 不用openclose 再考虑
      this.openClose = true;
      this.setLeftState(this.openClose);
      this.$emit("openClose", this.openClose);
    }
  }
};
</script>

<style lang="less" scoped>
@import "../styles/leftPanel/index.less";
.leftPanel-content {
  zoom: 1;
  // height: 600px;animate__bounceIn
}
.leftPanel-content:after {
  display: block;
  content: "";
  clear: both;
  height: 0;
  overflow: hidden;
}
.leftPanel-menu__li:hover {
  background: #fff !important;
}
.leftPanel-mainContent-toggle {
  line-height: 80px;
  text-align: center;
}
.menuActive {
  background: #ffffff;
  color: #000;
  font-weight: 500;
  opacity: 1 !important;
}
</style>
